<template>
  <div>
    <!-- 渐变背景 -->
    <div class="loginBg"></div>
    <!-- 云朵 -->
    <div class="logincloud">
      <img src="../static/image/cloud.png" alt />
    </div>
    <!-- 登录表单 -->
    <div class="loginInputBox">
      <div class="loginInputCenter">
        <h3>欢迎登录系统</h3>
        <div class="loginInput">
          <i class="iconfont quota-yonghu"></i>
          <input type="text" placeholder="用户名" v-model="name" />
        </div>
        <div class="loginInput">
          <i class="iconfont quota-mima"></i>
          <input type="password" placeholder="密码" v-model="password" />
        </div>
        <div class="loginCode">
          <div class="loginInput">
            <i class="iconfont quota-yanzhengma"></i>
            <input
              type="text"
              placeholder="请输入验证码"
              class="yanzhengma_input"
              v-model="picLyanzhengma"
              @keyup.enter="addUser"
            />
          </div>
          <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
            <img
              id="imgIdentifyingCode"
              :src="codeimg"
              style="height:40px; width: 100px; cursor: pointer;"
              alt="点击更换"
              title="点击更换"
            />
          </div>
        </div>
        <el-button type="primary" @click="addUser">登录</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
/*背景渐变
    @start  渐变开始颜色
    @end  结束颜色
    */
.gradient(@startColor:#F2F2F2,@endColor:#D4D4D4) {
  background: -webkit-gradient(
    linear,
    left,
    right,
    color-start(0.05, @startColor),
    color-stop(1, @endColor)
  );
  background: -moz-linear-gradient(left, @startColor 5%, @endColor 100%);
  background: -o-linear-gradient(left, @startColor 5%, @endColor 100%);
  background: -ms-linear-gradient(left, @startColor 5%, @endColor 100%);
  background: linear-gradient(to right, @startColor 5%, @endColor 100%);
  background: -webkit-linear-gradient(left, @startColor 5%, @endColor 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);
}

.loginBg {
  height: 320px;
  .gradient(#5ea6fb, #3ee2db);
}

.loginInputBox {
  position: relative;
  top: -170px;
  left: 0;
  text-align: center;
  // z-index: 2;
}

.loginInputCenter {
  background-color: #fff;
  display: inline-block;
  padding: 0 40px;
  width: 350px;
  border-radius: 6px;
  h3 {
    font-size: 22px;
    color: #5ea6fb;
    margin: 45px 0;
  }
  button {
    width: 270px;
    margin-bottom: 50px;
  }
}

.loginInput {
  border: 1px solid #ddd;
  margin-bottom: 25px;
  width: 270px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  border-radius: 0;
  i {
    font-size: 25px;
    color: #777;
  }
  input {
    width: 230px;
    height: 35px;
    font-size: 14px;
  }
}

.loginCode {
  display: flex;
  justify-content: space-between;
  .loginInput {
    width: 160px;
    input {
      width: 140px;
    }
  }
}

.divIdentifyingCode {
  z-index: 5;
  width: 102px; /*设置图片显示的宽*/
  height: 40px; /*图片显示的高*/
  background: #e2e2e2;
  margin: 0;
}

.logincloud {
  position: absolute;
  bottom: 0;
  right: 0;
  // z-index: -1;
  img {
    width: 100%;
  }
}
</style>


<script>
import md5 from "js-md5";
export default {
  components: {},
  data() {
    return {
      checkCode: "",
      picLyanzhengma: "",
      name: "",
      password: "",
      codeimg: ""
    };
  },
  methods: {
    /**
     * 窗口代码
     * @param {Boolean} bRefresh 是否刷新
     */
    getIdentifyingCode: function(bRefresh) {
      // let identifyCodeSrc =  "http://localhost/index#/login";
      // if (bRefresh) {
      //     identifyCodeSrc = "http://localhost/index#/login?" + Math.random();
      // }
      // let objs = document.getElementById("imgIdentifyingCode");
      // objs.src = identifyCodeSrc;
      this.getCode();
    },
    //登录
    addUser: function() {
      var self = this;
      var name = self.name;
      var passNew = self.name + self.password;
      var password = md5(passNew);
      // var password = self.password;
      var code = self.picLyanzhengma;
      if (name == "") {
        self.message(true, "名称不能为空！", "error");
        this.getIdentifyingCode(true);
        return;
      }
      if (password == "") {
        self.message(true, "密码不能为空！", "error");
        this.getIdentifyingCode(true);
        return;
      }
      self.$axios(
        "post",
        "/api/login/collegeLogin",
        {
          account: name,
          password: password,
          validateCode: code
        },
        function(response) {
          var code = response.data.code;
          if (code == 0) {
            self.$router.push("/v/college");
          } else {
            self.getIdentifyingCode(true);
          }
        }
      );
      // .then((response) => {
      //     var code = response.data.code

      //     if (code == 0) {
      //         // saveUserState('account', response.data.result.u_account)
      //         // saveUserState('type', response.data.result.type)
      //         self.$router.push('http:localhost:8088/v/college');
      //     } else {
      //         self.getCode();
      //         self.message(true, response.data.msg, 'error');
      //     }
      // })
      //     .catch(error => function (error) {
      //     });
    },
    /**
     * 获取登录验证码
     */
    getCode: function() {
      this.codeimg =
        "/api/login/getCode?code=" + Math.random();
    }
  },
  mounted() {
    this.getIdentifyingCode(true);
    this.getCode();
  }
};
</script>